<template>

  <base-content>
   <div class="main">
    <q-breadcrumbs class="text-grey" active-color="purple">
      <template v-slot:separator>
        <q-icon
          size="1.2em"
          name="arrow_forward"
          color="purple"
        />
      </template>

      <q-breadcrumbs-el label="首页" icon="home"  to="/"/>
      <q-breadcrumbs-el label="放射科" icon="widgets" />
      <q-breadcrumbs-el label="报告" icon="navigation" />
    </q-breadcrumbs>

   
<div class="oneForm">
    
    <div class="item">
        <div class="name">检查号:</div>
        <div class="sel">
            <q-input  v-model="checkNum"  label="Filled" outlined style="min-width:8rem;" />
        </div>
    </div>

    <div class="item">
        <div class="name">状态:</div>
        <q-select outlined v-model="status" :options="statusList" label="Outlined" style="min-width:8rem" />
    </div>
    
    <div class="item">
        <div class="name">报告平台:</div>
        <q-select outlined v-model="report" :options="reportList" label="Outlined" style="min-width:8rem"/>
    </div>

<div class="item">
        <div class="name">时间:</div>
        <q-input filled v-model="date" mask="date"  
      @click="timerShow" style="min-width:15rem">




<template v-slot:append>
         
        <q-icon name="event" class="cursor-pointer">

          <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
            <q-date v-model="date" mask="YYYY-MM-DD " color="purple" >
              <!-- <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div> -->
            </q-date>
           <!-- <q-time v-model="date" mask="YYYY-MM-DD HH:mm" color="purple" /> -->
          </q-popup-proxy>
        </q-icon>
         

      </template>





        </q-input>
    </div>

    </div>






   </div>
  </base-content>

</template>

<script>

// import countTo from 'vue-count-to'
import BaseContent from '../../components/BaseContent/BaseContent'
// import { thumbStyle } from 'components/BaseContent/ThumbStyle'
// import chartPie from '../../assets/js/echarts-1'
// import charts2Option from '../../assets/js/echarts-2'
import { income, expense, total } from '../../assets/js/echarts-3'
// import chartZ from '../../assets/js/echarts-4'

import { getList } from '../../axios/AxiosConfig.js'

import tables from '../../components/table.vue'

import  {flow1}  from '../../utils/echarts/gailan/flow1'

import { yyyymmdd } from '../../utils/timer/yyyymmdd'

export default {
  name: 'report',
  components: {
    BaseContent,
    tables,
    // countTo
  },
 
  data () {
    return {
       checkNum:'',
       status:'',
       report:'',
       statusList:['淘宝','放大招'],
       reportList:['已GG','还可以抢救','很乐观'],
       date:''

    }
  },
  
  mounted(){
      console.log(flow1);
    this.$nextTick(()=>{
        this.flow1 = flow1
        this.flow1Show = true
    })
  
  },
  methods: {
    timerShow(){
    console.log(this.$refs.qDateProxy);
    this.$refs.qDateProxy.show()
    this.timer = true
    // this.$refs.qDateProxy.target = false
  },
  },
  created(){
this.date = yyyymmdd()


      getList().then(res=>{
       console.log('res',res);
       this.data = res.data
       this.data.forEach((i,v)=>{
        //  i.name = 'lanshi'+ v;
         (v%2 == 0)?i.flag = true: i.flag = false
         i.handle = '查看报告'
       })
     }).catch(err=>{
       console.log(err);
     })

  }
}
</script>
<style lang="less" scoped>
 
.main{
    width: 100%;
    height: 100%;
    // position: relative;
    // position: fixed;
    // top: 0;
    // bottom: 0;
    // background-color: red;
    .oneForm{
        display: flex;
        justify-content: space-around;
        height: 5rem;
        .item{
            display: flex;
            height: 5rem;
            text-align: center;
            align-items: center;
            justify-content: center;
            .name{
                    text-align: center;
                    align-items: center;
                    font-size: 1.5rem;
                    width: 10rem;
                    text-align: right;
                    line-height: 5rem;
                   height: 5rem;
            }
           
        }
    }
}





</style>
